<template>
  <div class="div1">
    <h2>父子组件 {{ username }}</h2>
    <!-- <input type="text" v-model="username"> -->
     <!-- <input type="text" :value="username" 
     @input="username = (<HTMLInputElement>$event.target).value"/> -->

      <TongXin4Child v-model="username"/>
      <br/>
      <!-- 底层实现就是这样 -->
      <TongXin4Child :modelValue="username"
       @update:modelValue="username = $event"
      />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import TongXin4Child from './TongXin4Child.vue'

const username = ref('hello');

</script>

<style lang="scss" scoped>
.div1 {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #eee;
}

</style>
